var htmlwp = require('html-webpack-plugin');//引入插件对象。

var webpack = require('webpack');//实现分离第三方包的功能
var path = require('path');//为了实现下边的路径配置

module.exports = {
    entry:{
		app: path.resolve(__dirname, './src/main.js'),//设置入口文件(即要打包的文件)
        // 需要分离的第三方包名写在数组中
        vendors: ['mint-ui', 'moment', 'vue', 'vue-resource', 'vue-router','vue-picture-preview']
	},
    output: {
        path: __dirname + "/dist",//指定打包好后的输出文件夹，这里设置的是在dist文件夹中。前边__dirname是为了代替绝对路径，因为webpack中要求这个路径是一个绝对路径。
        filename: "build.js" //指定打包生成后的文件名。
    },
    module:{
        loaders:[
            {
                test:/.css$/, //打包css文件,
                loader: "style-loader!css-loader" //导入包，依赖包之间用!连接。
            },
            {
				test: /\.scss$/, //打包.scss文件
				loader: "style-loader!css--loader!sass-loader"
			},
			{
               	test: /\.less$/, //打包 .less文件
        		loader:'style-loader!css-loader!less-loader'
			},
			{
				test: /\.(png|jpg|gif|ttf|svg)$/,  //打包 url请求的资源文件
        		loader:'url-loader?limit=20000' //limit表示图片的大小为20K是临界值，小于20K的图片均被打包到build.js中去，请求图片就会很快,值可以视情况改变。
			},
			{
				test: /\.js$/, // 将.js文件中的es6语法转成es5语法
        		loader:'babel-loader',
       			exclude:/node_modules/
			},
			{
				test: /.vue$/,  //解析 .vue 组件页面文件
        		loader:'vue-loader'
			}
        ]
    },
    plugins: [
		new htmlwp({
			filename: 'index.html', //webpack-dev-server在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能
      		template: 'template.html' //根据template.html这个模板来生成(这个文件请程序员自己生成.即项目中的主页面，也就是之前的index.html页面，因为这里将代码完全打包，所以主页面基本为空，因此只需要将其改成template.html即可)
		}),
		new webpack.optimize.CommonsChunkPlugin({//分离第三方包的配置文件
            name: 'vendors',
            filename: 'vendors.js'
    	}) 
	]
}